<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Input Number 数字输入框</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">

</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">要使用它，只需要在 el-input-number 标签中使用 v-model 绑定变量即可，变量的初始值即为默认值。</p>
	<el-input-number v-model="num0" :min="0" :max="100" @change="handleChange" label="数量"></el-input-number>
	
	<el-divider content-position="left">禁用状态</el-divider><!-- =============================================================== -->
	<p class="desc">disabled属性接受一个 Boolean，设置为true即可禁用整个组件。如果你只需要控制数值在某一范围内，可以设置 min 属性和 max 属性， 默认最小值为 0。</p>
	<el-input-number v-model="num" disabled></el-input-number>
	
	<el-divider content-position="left">步进</el-divider><!-- =============================================================== -->
	<p class="desc">允许定义递增递减的步进控制。设置 step 属性可以控制步长。</p>
	<el-input-number v-model="num1" :step="2" ></el-input-number>
	
	<el-divider content-position="left">严格步进</el-divider><!-- =============================================================== -->
	<p class="desc">step-strictly属性接受一个Boolean。 如果这个属性被设置为 true，则只能输入步进的倍数。</p>
	<el-input-number v-model="num2" :step="5" step-strictly ></el-input-number>
	
	<el-divider content-position="left">精度</el-divider><!-- =============================================================== -->
	<p class="desc">设置 precision 属性可以控制数值精度，接收一个 Number。</p>
	<el-input-number v-model="num3" :precision="2" :step="0.1" :max="10000" ></el-input-number>
	
	<el-divider content-position="left">不同的输入框尺寸</el-divider><!-- =============================================================== -->
	<p class="desc">使用 size 属性额外配置尺寸，可选的尺寸大小为：large 或 small</p>
	<el-input-number v-model="num11" size="large"></el-input-number>&nbsp;&nbsp;
	<el-input-number v-model="num12"></el-input-number>&nbsp;&nbsp;
	<el-input-number v-model="num13" size="small" ></el-input-number>
	
	<el-divider content-position="left">按钮位置</el-divider><!-- =============================================================== -->
	<p class="desc">设置 controls-position 属性可以控制按钮位置。</p>
	<el-input-number v-model="num20" :min="1" :max="100" controls-position="right" @change="handleChange"></el-input-number>
	
	<el-divider content-position="left">不用控制按钮</el-divider><!-- =============================================================== -->
	<p class="desc">设置 controls 属性可以控制是否使用控制按钮。</p>
	<el-input-number v-model="num21" :min="1" :max="100" :controls="false" style="width: 80px;" @change="handleChange"></el-input-number>
	
	<div class="h100"></div>
</div>
</body>
<script>
const Main = {
	data() {
		return {
			num0: 0,
			num: 10,
			num1: 1,
			num2: 2,
			num3: 3,
			num11: 11,
			num12: 12,
			num13: 13,
			num14: 14,
			num20: 20,
			num21: 21,
		}
	},
	methods:{
		handleChange(item){
			console.log(item)
		},
	},
}
const app = Vue.createApp(Main);
app.use(ElementPlus);
let vm = app.mount("#app");

</script>
</html>
